<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :showBackIcon="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      title="通讯费回馈"
    >
    </u-navbar>

    <image class="bg" src="/static/images/bg.png" mode="widthFix"></image>

    <view class="content">
      <view class="header">
        <view class="header-content">
          <view class="title">消费达标领现金</view>
          <view class="subTitle">每年赠送70元消费回馈卡券！</view>
          <view class="expirationTime">活动奖券到期日:2024-01-02 24:00:00</view>
        </view>
      </view>
      <view class="list">
        <view class="item">
          <image
            class="item-bg"
            src="/static/images/icon-txfhkjj.png"
            mode="widthFix"
          ></image>
          <view class="item-content">
            <view class="item-content_in">
              <image
                class="status"
                src="/static/images/icon-txfwc.png"
                mode="widthFix"
              ></image>
              <view class="btn">立即领取</view>
              <view class="progressBox">
                <u-line-progress
                  :percentage="30"
                  :showText="false"
                  height="12"
                  activeColor="#DEB183"
                ></u-line-progress>
                <view class="progressBottom">
                  <text>消费满20万元可领</text>
                  <text>19/20</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 60rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
  }
}

.content {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 9;
}

.header {
  position: relative;
  width: 100%;

  .header-content {
    padding: 70rpx 60rpx 34rpx;
    width: 100%;
    height: 100%;
    line-height: 1;
    .title {
      width: 100%;
      font-family: PingFang SC, sans-serif;
      font-weight: 800;
      font-size: 42rpx;
      color: #b7926e;
    }
    .subTitle {
      margin-top: 20rpx;
      width: 100%;
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      font-size: 24rpx;
      color: #999999;
      line-height: 1;
    }
    .expirationTime {
      margin-top: 20rpx;
      width: 100%;
      font-family: PingFang SC, sans-serif;
      font-weight: normal;
      font-size: 24rpx;
      color: #999999;
    }
  }
}

.list {
  position: relative;
  width: 100%;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  .item {
    position: relative;
    width: 100%;
    margin-bottom: 36rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .item-bg {
      width: 100%;
      height: auto;
      z-index: 1;
    }

    .item-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
      .item-content_in {
        position: relative;
        width: 100%;
        height: 100%;

        .status {
          position: absolute;
          top: 0;
          left: 0;
          width: 93rpx;
          height: auto;
          z-index: 9;
        }

        .btn {
          position: absolute;
          top: 85rpx;
          right: 118rpx;
          width: 180rpx;
          height: 52rpx;
          line-height: 52rpx;
          font-family: Alibaba PuHuiTi 2, sans-serif;
          font-weight: normal;
          font-size: 28rpx;
          color: #965e27;
          text-align: center;
          background: linear-gradient(0deg, #f5d1ad, #deb183);
          border-radius: 26rpx;
          z-index: 9;
        }
        .btn1 {
          position: absolute;
          top: 85rpx;
          right: 118rpx;
          width: 180rpx;
          height: 52rpx;
          line-height: 52rpx;
          font-family: Alibaba PuHuiTi 2, sans-serif;
          font-weight: normal;
          font-size: 28rpx;
          color: #965e27;
          text-align: center;
          background: #f9e1c8;
          border-radius: 26rpx;
          z-index: 9;
        }
        .progressBox {
          position: absolute;
          right: 55rpx;
          bottom: 35px;
          width: 289rpx;
          .progressBottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            text {
              font-family: PingFang SC, sans-serif;
              font-weight: 500;
              font-size: 22rpx;
              color: #bb8c5e;
            }
          }
        }
      }
    }
  }
}
</style>
